/*
 * @Author: luoqi
 * @Date: 2022-03-29 12:20:00
 * @LastEditors: luoqi
 * @LastEditTime: 2022-04-27 16:03:17
 * @Description: 
 */
/*
 * @Author: luoqi
 * @Date: 2022-03-29 10:50:06
 * @LastEditors: luoqi
 * @LastEditTime: 2022-03-29 12:17:51
 * @Description: 
 */
import React,{ useState } from 'react';
import {  Button,Modal,Form, Input, Radio,Select,Upload, message } from 'antd';
import {  PlusOutlined, UploadOutlined } from '@ant-design/icons';
import {connect} from 'react-redux'
import axios from '../../utils/axios'
import qs from 'qs'
const { Option } = Select;

const Addclassify = (props) => {
  
  const {departmentTree,partTree} = props.types;
  const [isModalVisible, setIsModalVisible] = useState(false);
  const [value, setValue] = useState(!props.data.type?0:1);
  const [form]=Form.useForm()
  let {name,type,status,pid}=props.data
  // console.log(props);
  //一级分类或二级分类
  const [type1,setType]=useState(pid==0?1:2)
  //选中的父级类别
  let [mypid,setPid]=useState(pid.toString())  
    //上传图片
    const [imgUrl, setImgUrl] = useState()
  const showModal = () => {
    setIsModalVisible(true);
  };

  const handleOk = () => {
    form.submit()
    
  };

  const handleCancel = () => {
    setIsModalVisible(false);
  };
  const onFinish = (values) => {
    // console.log('Success:', values);
    let {name,type,status,pid}=values
    // console.log(props.data.pid);
    // console.log(mypid);
    // console.log(pid);
    //修改
    axios({
      url:'/classify/upsert',
      method:'post',
      data:qs.stringify({
        id:props.data.id,
        iconImg:'',
        name:name,
        type:type,
        status:status==1?true:false,
        pid:mypid
      })
    }).then(res=>{
      console.log(res);
      if(res.code=='200'){
        //提示
        message.success('修改成功');
        props.setNum(1)
        setIsModalVisible(false);
      }
      
    })
  };

  const onFinishFailed = (errorInfo) => {
    console.log('Failed:', errorInfo);
  };
  //按部位按科室
  const onChange = e => {
    console.log(props)
    let value=e.target.value
    setValue(value);
    // setTypes(value==0?partTree:departmentTree)
    setPid(value==0?partTree[0].id.toString():departmentTree[0].id.toString())
  };
  function onChange1(){

  }
  //一级类别与二级类别
  function handleChange(value) {
   
    setType(value)
  }
  function handleChange1(value){
    setPid(value)
  }

  //上传文件
  const props1 = {
    name: 'file',
    action: '/api/upload',
    onChange(info) {
      // console.log(info);
      if (info.file.status !== 'uploading') {
        // console.log(info.file, info.fileList);
      }
      if (info.file.status === 'done') {
        console.log(info.file.response);
        let { fileName } = info.file.response
        setImgUrl(fileName)
        message.success(`${info.file.name} 上传成功`);
      } else if (info.file.status === 'error') {
        message.error(`${info.file.name} 上传失败`);
      }
    },
  };
  return (
    <div>
      <Button type="primary" ghost  onClick={showModal}>修改</Button>
      <Modal title="修改分类" visible={isModalVisible} onOk={handleOk} onCancel={handleCancel} okText="确定"
            cancelText="取消">
        <Form
        form={form}
          name="basic"
          labelCol={{ span: 5 }}
          wrapperCol={{ span: 16 }}
          onFinish={onFinish}
          onFinishFailed={onFinishFailed}
          autoComplete="off"
          initialValues={{name:name,type:!type?0:1,level:pid==0?1:2,perentClassify:mypid,status:status?1:2}}
        >
          <Form.Item
            label="分类名称"
            name="name"
            rules={[{ required: true, message: '请输入分类名称' }]}
          >
            <Input />
          </Form.Item>

          <Form.Item
            label="类型"
            name="type"
          >
            <Radio.Group  onChange={onChange} value={value} >
              <Radio value={0}>按部位</Radio>
              <Radio value={1}>按科室</Radio>
            </Radio.Group>
          </Form.Item>
          <Form.Item
            label="分类级别"
            name="level"
          >
            <Select value={type1} style={{ width: 120 }} onChange={handleChange}>
              <Option value={1}>一级</Option>
              <Option value={2}>二级</Option>
            </Select>
          </Form.Item>
         {type1==1? <Form.Item
            label="上传icon图片"
          >
            <Upload {...props1}>
              <Button icon={<UploadOutlined />}>上传icon图片</Button>
            </Upload>
          </Form.Item>:<Form.Item
            label="选择父级类别"
          >
            <Select placeholder="请选择父级类别"  style={{ width: 120 }} value={mypid} onChange={handleChange1}>
              {value==0?partTree.map(item=>{
                return <Option key={item.id} value={item.id.toString()}>{item.name}</Option>
              }):departmentTree.map(item=>{
                return <Option key={item.id} value={item.id.toString()}>{item.name}</Option>
              })}
            </Select>
          </Form.Item>}
          
          <Form.Item
            label="类别状态"
            name="status"
          >
            <Radio.Group onChange={onChange1} value={value} >
              <Radio value={1}>可用</Radio>
              <Radio value={0}>不可用</Radio>
            </Radio.Group>
          </Form.Item>
        </Form>
      </Modal>
    </div>
  );
}

export default connect(
  state=>({types:state.types}),
  {}
)(Addclassify);
